<template>
  <div>
    <van-nav-bar title="嗨购收银台">
      <template #left>
        <van-icon
          name="arrow-left"
          size="25"
          color="black"
          @click="$router.replace('/cart')"
        />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="25" color="black" />
      </template>
    </van-nav-bar>
    <div class="money">
      ￥{{ money }}<br />
      <p>
        <span>支付剩余</span
        ><van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </p>
    </div>
    <div v-if='success' class='success'>
        恭喜您支付订单成功！再去看看吧
    </div>
    <van-submit-bar button-text="确认支付" @submit="onSubmit"> </van-submit-bar>

    <van-dialog v-model="show" @confirm='psd' title="请输入密码" show-cancel-button>
   <div class='psd'>
       <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
   </div>
    </van-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import { PasswordInput, NumberKeyboard,Toast} from 'vant';
import {addOrder} from '../api/order'

Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
export default {
  data() {
    return {
      money: this.$route.params.SumMoney / 100,
      time: 24 * 60 * 60 * 1000,
      value: "",
      showKeyboard: true,
      show: false,
      success:false
    };
  },
  methods: {
    onSubmit() {
      this.show = true;
    },
    psd(){
        Toast('支付成功')
        addOrder({userid:localStorage.getItem('id')}).then((res)=>{
            console.log(res);
            this.success=!this.success
        })
    }
  },
};
</script>

<style scoped>
.money {
  background-color: #eee;
  height: 1rem;
  text-align: center;
  padding-top: 0.4rem;
  color: crimson;
  font-weight: 700;
  font-size: 20px;
}
.money p {
  display: flex;
  color: black;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 0.1rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #180f10;
}
.block {
  display: inline-block;
  width: 22px;
  color: rgb(22, 14, 14);
  font-size: 12px;
  text-align: center;
  background-color: #e4ced1;
}
::v-deep .van-submit-bar__bar {
  display: flex;
  justify-content: center;
}
::v-deep.van-button {
  flex: 1;
}
.psd{
    width: 3rem;
    height: 4rem;   
}
.success{
    text-align: center;
    margin: .5rem auto;
    width: 3rem;
    height: .5rem;
    background-color: chartreuse;
    line-height: .5rem;
    border-radius: .3rem;
    color: brown;
}
</style>